import React, { Component } from 'react'
import Proptypes from "prop-types"
import Item from '../Item'
import "./index.css"

export default class List extends Component {
  // 对接收的props进行：类型、必要性的限制
  static propTypes = {
    todos: Proptypes.array.isRequired,
    updateTodo: Proptypes.func.isRequired,
    deleteTodo: Proptypes.func.isRequired
  }

  render() {
    const { todos, updateTodo, deleteTodo } = this.props
    return (
      <ul className='todo-main'>
        {
          todos.map((todo, index) => {
            // return <Item id={todo.id} name={todo.name} done={todo.done} key={todo.id}/>
            return <Item {...todo} key={todo.id} updateTodo={updateTodo} deleteTodo={deleteTodo}/>
          })
        }
      </ul>
    )
  }
}
